其他
在React中使用FontAwesome图标字体
Font Awesome 是什么
Font Awesome是一套完美的图标字体库,它提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
React中使用Font Awesome
fontawesome官网以及github项目主页把FontAwesome的使用说得很详尽,我这里重点概括一下,同时结合使用过程中遇到的问题,讲一下如何找到哪个字体在在哪个库。
npm i --save @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/react-fontawesome
yarn add @fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/react-fontawesome
这两个包是图标字体基础文件, @fortawesome/free-solid-svg-icons 是图标字体样式风格文件。
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)
如上,从@fortawesome/free-solid-svg-icons中导出了faCoffee咖啡图标,通过<FontAwesomeIcon icon={faCoffee} />即可引入到页面。import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faCoffee)
其中library.add()添加的是:fab
:代表中的所有品牌图标@fortawesome/free-brands-svg-icons
。因此,该包中的任何品牌图标都可以在我们应用程序的其他任何位置通过图标名称作为字符串引用。例如:"apple"
,"microsoft"
,或"google"
。faCheckSquare
和faCoffee
:分别添加每个图标,使我们可以在整个应用中分别通过图标字符串名称"check-square"
和来引用它们"coffee"
。
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
export const Beverage = () => (
<div>
<FontAwesomeIcon icon="check-square" />
Your <FontAwesomeIcon icon="coffee" /> is hot and ready!
</div>
)
3 添加更多字体样式或收费图标怎么知道哪个图标在哪个字体库中? 哪个图标是收费的,哪个是免费的?
参考资料
React | Font Awesome FortAwesome/react-fontawesome: Font Awesome 5 React component reactjs – Where do I find the object names of icons in the FontAwesome free packages? – Stack Overflow
往期推荐